<!-- 小助手 -->
<template>
	<view class="container">
		<view class="status_bar" :style="{height:height+40+'px'}">
			<text @tap="navBack" class="cell-more yticon icon-zuo"></text>
			<text class="tit">我的小助手</text>
			<text></text>
		</view>
		<view class="header">
			<view class="left">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="nick-box">
					<view class="nickname">
						{{userInfo.nickname}}
					</view>
					<view class="phone">
						{{userInfo.phone}}
					</view>
				</view>
			</view>
			<view class="right" @tap="groundQr">
				<image src="../../../static/images/center/icon-qrcode.png" mode=""></image>
				<text>二维码</text>
				<text class="yticon icon-you"></text>
			</view>
		</view>
		<view class="sect-promote">
			<view class="title-t">
				<view class="title">推广数据</view>
				<view class="time">有效期：{{promoter_expire_time}}</view>
			</view>
			<view class="process">
				<progress-i  :current="current" :target="target" :outColor='"#7E7E7E"' :time="1000"></progress-i>
				<view class="tips">
					<text>0</text>
					<text>{{target}}</text>
				</view>
			</view>
			<view class="pro-num">推广商家数量： <text>{{current}}</text>	</view>
		</view>
		<view class="sect-detail">
			<view class="title">推广明细</view>
			<view class="list">
				<block v-for="(item,index) in proList" :key="index">
					<view class="item">
						<image :src="item.logo" mode=""></image>
						<view class="item-r">
							<text class="name">{{item.seller_name}}</text>
							<text class="time">{{item.time}}</text>
						</view>
					</view>
				</block>
				<view class="none-list">
					<image v-if="proList.length === 0" src="/static/images/public/no-bill.png" mode=""></image>
					<view>暂无推广，先去推广吧</view>
					<!-- <empty :custom="true" src="" text="还未推广,快去推广吧"></empty> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/utils/util.js'
	import { userPromoterCenter } from '@/api/user.js'
	export default {
		data(){
			return {
				userInfo: uni.getStorageSync('userInfo'),
				current: 0,
				proList: [],
				target: 0,
				height: null, //获取的状态栏高度
				promoter_expire_time: '',
			}
		},
		onLoad() {
		},
		created() {
			uni.getSystemInfo({
				success:(data) => {
					// 将其赋值给this
					this.height = data.statusBarHeight;
				}
			})
		},
		onShow() {
			this.userPromoterCenter()
		},
		methods: {
			navBack(){
				uni.redirectTo({
					url: "/pages/index/index?current=4"
				})
			},
			groundQr(){
				uni.navigateTo({
					url: `/pages/center/groundPromot/groundPromot?type=${7}`
				})
			},
			userPromoterCenter(){
				userPromoterCenter().then(res => {
					this.promoter_expire_time = utils.formatDate(new Date(res.data.promoter_expire_time*1000))
					this.proList = res.data.promoter_list.map((val,key) => {
						val.time = utils.formatDate(new Date(val.spread_time*1000));
						return val
					})
					this.target = res.data.target;
					this.current = res.data.currcent_promoter_count;
					
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.container{
		.status_bar{
			position: fixed;
			top: 0;
			width: 100%;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding-top: 40rpx;
			z-index: 99;
			background-color: #fff;
			box-sizing: border-box;
			padding: 40rpx 25rpx 0;
			.icon-zuo{
				font-size: 40rpx;
				font-weight: bold;
				position: relative;
				left: 10rpx;
			}
		}
		.header{
			padding: 240rpx 50rpx 50rpx;
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			.left{
				display: flex;
				justify-content: space-between;
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius:50%;
					margin-right: 20rpx;
				}
				.nick-box{
					color: #333;
					line-height: 50rpx;
				}
				.nickname{
					font-size:34rpx;
					font-weight: 500;
					text-overflow: ellipsis;
					width: calc(100vw - 450rpx);
					white-space: nowrap;
					overflow: hidden;

				}
				.phone{
					font-size:28rpx;
					font-weight: 400;
				}
			}
			.right{
				display: flex;
				justify-content: space-between;
				align-items: center;

				image{
					margin-right: 10rpx;
					width:34rpx;
					height:34rpx;
				}
				.icon-you{
					margin-left: 10rpx;
				}
			}
		}
		
		.sect-promote{
			box-sizing: border-box;
			padding: 45rpx;
			margin: 0 auto;
			width:91%;
			height:340rpx;
			background: rgba(241,249,243,1);
			border-radius:10rpx;
			.title-t{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #999;
				.time{
					font-size: 26rpx;
				}
			}
			.process{
				margin-top: 50rpx;
				width: 100%;
				.tips{
					display: flex;
					justify-content: space-between;
					padding: 0 10rpx 0;
					color: #CCC;
					font-weight: bold;
					font-size: 36rpx;
					
				}
			}
			.pro-num{
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #333;
				text-align: center;
				text{
					font-weight: bold;
					
				}
			}
		}
		
		.sect-detail{
			padding: 50rpx;
			.none-list{
				padding-top: 70rpx;
				color: #c3c3c3;
				text-align: center;
				image{
					width: 250rpx;
					height: 250rpx;
				}
			}
			.list{
				padding-top: 50rpx;
			}
			.item{
				padding: 20rpx 0;
				border-bottom: 1px solid #EEE;
				display: flex;
				// justify-content: space-between;
				image{
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}
			}
			.item-r{
				display: flex;
				flex-direction: column;
				line-height: 60rpx;
			}
			.name{
				font-size:34rpx;
				color: #333;
				width:500rpx;
				overflow: hidden;
				display: block;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.time{
				font-size:28rpx;
				color: #999;
			}
		}
		.title{
			font-weight: 500;
			// height:32rpx;
			font-size:34rpx;
			color: #333;
		}
	}
</style>
